* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
    background-color: rgb(74, 162, 239);
}


.container{
display: grid;
grid-template-rows: auto 1fr;
align-items: center;
gap: 5px;
}

.menu{display: none;}


.box {
    
   width: 100%;
   height: 60px;
   border: solid rgb(0, 255, 229) 1px;
   border-radius: 5px;
   align-items:center;
   justify-content: center;
}
.commercial{background-color: rgb(195, 195, 252);}
.news1{background-color: rgb(136, 136, 211);}
.news2{background-color: rgb(101, 101, 237);}
.blogg1{background-color: rgb(120, 237, 120);}
.blogg2{background-color: rgb(127, 237, 127);}
.review1{background-color: aquamarine;}
.review2{background-color: aquamarine;}



@media only screen and (min-width:651px)
{
.container
{
display: grid;
grid-template-columns: 25% 25% 25% 25%;
align-items: center;
gap: 5px;
}
.menu{
    display: grid;
    grid-template-columns: 27% 27% 27% 10;
    align-items: center;
    text-align: center;
}
a{
    width: 100%;
    height: 60px;
    border: solid rgb(255, 0, 0) 1px;
    border-radius: 5px;
    gap: 5px;
}

.logo{display: none;}
    
}